<template>
	<view class="c-content">
		<u-toast ref="uToast"></u-toast>
		<view class="party">
			<view class="party-title r-flex">
				<view class="title-icon r-flex">
					<u-icon name="account-fill" color="#fff" size="24"></u-icon>
				</view>
				<text class="title-text">
					{{partyInfo.name}}
				</text>
				<view class="client c-flex" v-if="partyInfo.wtType=='委托方'">
					<text>委</text>
				</view>
			</view>
			<view class="party-detail">
				<view :class="['detail-item',{'isGray':common.noNull(partyInfo.attr)=='-'}]">
					<text class="item">属性:</text>
					<text>{{common.noNull(partyInfo.attr)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(partyInfo.mobile)=='-'}]">
					<text class="item">电话:</text>
					<text>{{common.noNull(partyInfo.mobile)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(partyInfo.nation)=='-'}]">
					<text class="item">民族:</text>
					<text>{{common.noNull(partyInfo.nation)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(partyInfo.sex)=='-'}]">
					<text class="item">性别:</text>
					<text>{{partyInfo.sex | sexName}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(partyInfo.idNum)=='-'}]">
					<text class="item">身份证号码:</text>
					<text>{{common.noNull(partyInfo.idNum)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(partyInfo.address)=='-'}]">
					<text class="item">居住地址:</text>
					<text>{{common.noNull(partyInfo.address)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(partyInfo.summary)=='-'}]">
					<text class="item">备注:</text>
					<text>{{common.noNull(partyInfo.summary)}}</text>
				</view>
			</view>
		</view>
		<u-gap height="16" bgColor="#f7f6fa"></u-gap>
		<u-button hairline color="#1C5AD2" @click="editParty()">编辑</u-button>
		<u-gap height="16" bgColor="#f7f6fa"></u-gap>
		<u-button hairline @click="cancel()">删除</u-button>
		<u-modal :content="contentDel" :show="showDel" showCancelButton closeOnClickOverlay @confirm="confirmDel"
			@cancel="cancelDel" confirmColor="#FD7840">
		</u-modal>
	</view>
</template>

<script>
	import {
		getComRequest,
		deleteRequest
	} from '@/utils/request';
	export default {
		data() {
			return {
				showDel: false,
				contentDel: "此操作将删除该当事人,确认删除？",
				partyId: "",
				partyInfo: {}
			}
		},
		onShow() {
			this.partyInfoRequest();
		},
		onLoad: function(option) {
			this.partyId = option.id;
		},
		mounted() {
			this.partyInfoRequest();
		},
		filters: {
			sexName: value => {
				switch (value) {
					case "0":
						return '男';
					case "1":
						return '女';
					default:
						return '未知';
				}
			}
		},
		methods: {
			// 获取当事人数据
			partyInfoRequest() {
				const that = this;
				const url = "/api/participant/" + this.partyId;
				getComRequest(url, {}).then((res) => {
					if (res.code == 200) {
						this.partyInfo = JSON.parse(JSON.stringify(res.data));
					} else {
						return this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {})
			},
			// 编辑当事人信息传值
			editParty() {
				uni.navigateTo({
					url: "/pages/caseList/party/editParty?item=" + encodeURIComponent(JSON.stringify(this
						.partyInfo))
				})
			},
			// 删除当事人
			cancel() {
				const that = this;
				this.showDel = true;
			},
			confirmDel() {
				const that = this;
				// 替换为你的API请求路径
				const url = "/api/participant/delete/" + this.partyId;
				deleteRequest(url, {}).then((res) => {
						if (res.code == 200) {
							this.showDel = false;
							uni.navigateBack({
								url: '/pages/caseList/caseProcess'
							})
						} else {
							this.$refs.uToast.show({
								message: res.message,
								type: 'err',
							})
						}
					})
					.catch((err) => {});
			},
			cancelDel() {
				this.showDel = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.c-content {
		width: 100%;
		padding: 0 24rpx;
	}

	.party {
		padding: 30rpx 24rpx;
		margin-top: 32rpx;
		border-radius: 10rpx;
		background-color: #fff;
		min-height: 400rpx;
	}

	.party-title {
		padding: 24rpx 0;
		position: relative;
		align-items: center;

		.title-icon {
			width: 64rpx;
			height: 64rpx;
			margin-right: 16rpx;
			align-items: center;
			justify-content: space-around;
			background-color: #1C5AD2;
			border-radius: 50%;
		}

		.title-text {
			flex: 1;
			font-size: 32rpx;
			font-weight: bold;
		}

		.client {
			top: -30rpx;
		}
	}

	.party-detail {
		.detail-item {
			position: relative;
			padding: 12rpx 0 12rpx 32rpx;

			.item {
				padding-right: 10rpx;
			}
		}

		.detail-item::before {
			display: inline-block;
			position: absolute;
			left: 0;
			top: 22rpx;
			width: 10rpx;
			height: 10rpx;
			background-color: #1C5AD2;
			border-radius: 50%;
			content: '';
		}

		.isGray::before {
			background-color: #ccc;
		}
	}

	.c-content /deep/ .u-modal {
		text-align: center;
	}
</style>